<template>
  <div class="app-container">
    <el-row :gutter="15">
      <!--菜单及按钮权限-->
      <el-col :span="8">
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <el-tooltip class="item" effect="dark" content="选择指定角色分配菜单及按钮" placement="top">
              <span class="role-span">菜单及按钮分配</span>
            </el-tooltip>
            <!-- 顶部按钮 -->
            <TopButton :baba="this" :up="this" position="TOP_RIGHT" style="float: right; padding: 0 9px;" />
          </div>
          <el-tree
            ref="menu"
            v-loading="roleTreeLoading"
            :data="menus"
            :default-checked-keys="menuIds"
            :props="defaultProps"
            :accordion="false"
            show-checkbox
            check-on-click-node
            :check-strictly="true"
            node-key="id"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <svg-icon :icon-class="data.icon" />
              <span class="custom-tree-lable">{{ node.label }}</span>
            </span>
          </el-tree>
        </el-card>
      </el-col>
      <!--角色列表-->
      <el-col :span="16">
        <el-card shadow="never">
          <!--卡片头-->
          <div slot="header" class="clearfix">
            <span class="role-span">角色列表</span>
          </div>

          <CommonTable ref="commonTable" :qo="qo" :baba="this" :row-click="handleRowClick">
            <!-- 查询参数 -->
            <template slot="filterItems">
              <el-form-item label="关键字" prop="keyword">
                <el-input v-model.trim="qo.keyword" clearable />
              </el-form-item>
            </template>
            <!-- 列表头 -->
            <template slot="column">
              <el-table-column label="角色名" prop="name" />
              <el-table-column label="描述" prop="description" />
              <el-table-column label="创建日期" prop="dateCreated" />
              <el-table-column label="修改日期" prop="lastUpdated" />
            </template>
          </CommonTable>
        </el-card>
      </el-col>
    </el-row>

    <Form ref="roleForm" :baba="this" />
  </div>
</template>

<script>
import { list, deleteRole, singleRoleMenuAndButton, bindMenuAndButton } from '@/api/system/role'
import { wholeTree } from '@/api/system/menu'
import TopButton from '@/components/TopButton'
import CommonTable from '@/components/CommonTable'
import Form from './form'
export default {
  name: 'Role',
  components: { Form, CommonTable, TopButton },
  data() {
    return {
      qo: { keyword: '' },
      menus: [], menuIds: [], roleTreeLoading: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.wholeTree()
  },
  methods: {
    getData(qoPro) {
      return list(qoPro)
    },
    create() {
      this.$refs.roleForm.createOpen()
    },
    update(row) {
      this.$refs.roleForm.updateOpen(row.id)
    },
    handleDelete(row) {
      this.$confirm('确认删除此角色?', '提示', {
        type: 'warning'
      }).then(() => {
        const ld = this.$loading()
        deleteRole(row.id).then(res => {
          this.$message.success('删除成功')
          ld.close()
          this.$refs.commonTable.listData()
        })
      }).catch(() => {})
    },
    bindRelation() {
      this.$refs.commonTable.getCurrentRow().then(row => {
        const ld = this.$loading()
        const nodes = this.$refs.menu.getCheckedNodes()
        const params = []
        nodes.forEach(node => {
          params.push({ id: node.id, whetherButton: node.whetherButton })
        })
        setTimeout(() => {
          bindMenuAndButton(row.id, params).then(res => {
            this.$notify.success('绑定成功')
            ld.close()
          }).catch(() => { ld.close() })
        }, 600)
      })
    },
    wholeTree() {
      this.roleTreeLoading = true
      wholeTree().then(response => {
        this.menus = response
        this.roleTreeLoading = false
      })
    },
    handleRowClick(row) {
      this.roleTreeLoading = true
      // 清空选中
      this.$refs.menu.setCheckedKeys([])
      singleRoleMenuAndButton(row.id).then(response => {
        this.menuIds = response
        this.roleTreeLoading = false
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.role-span {
  font-weight: bold;color: #303133;
  font-size: 15px;
}
.filter-tree{
  margin-top:16px;
}
.custom-tree-node {
  flex: 1;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  .custom-tree-lable {
    margin-left: 8px;
  }
}
</style>
